<template>
  <!-- 法规平台 -->
  <div class="app-container">
    <!-- <h1>法规平台</h1> -->

    <div class="boxlaw">
      <div slot="header" class="clearfix">
        <ComSelect @EventChange="ChangeFn" :options="options"></ComSelect>
      </div>

      <div class="comform">
        <ComForm
          ref="comForm"
          @EventReset="resetFn"
          @EventOnsubmit="queryFn"
          :list="comForm"
        >
        </ComForm>
      </div>
      <el-button
        @click="addShowFn"
        v-hasPermi="['financial:commision:add']"
        type="primary"
        >新增</el-button
      >
      <ComTable
        @handleCurrentChange="CurrentPageChangeFn"
        @handleSizeChange="currentPageSizeChangeFn"
        :key="random"
        :list="tableList"
        :modes="tableModes"
        :config="{ border: true, loading }"
        :pagination="{ total: paging.total, pageNum: paging.pageNum }"
      >
        <el-table-column #default="{ row }" align="left">
          <template>
            <!-- "
              $router.push({
                path: '/contentPlatform/laws/laws-details',
                query: row,
              })
            " -->
            <!-- v-hasPermi="['base:docModule:list']" -->
            <el-button
              @click="editShowFn(row)"
              v-hasPermi="['financial:commision:getInfo']"
              plain
              size="mini"
              type="primary"
              >修改</el-button
            >
          </template>
          <template>
            <el-button
              plain
              size="mini"
              v-hasPermi="['financial:commision:remove']"
              type="primary"
              @click="deleteFn(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </ComTable>
      <Add
        :isImgText="isImgText"
        @Eventadd="addFn"
        :dialogVisible.sync="dialogVisible"
      ></Add>
      <Edit
        ref="edit"
        @EventEdit="editFn"
        :EditDialogVisible.sync="EditDialogVisible"
      ></Edit>
    </div>
  </div>
</template>

<script>
import ComForm from "../../../components/comForm.vue";
import ComSelect from "../../../components/comSelect.vue";
import ComTable from "../../../components/comTable.vue";
import comForm from "../../../components/comForm.vue";
// import { getdocGetTypeApi } from "@/wss/api/ContentSupervision.js";

import {
  getCommisionListApi,
  getCommisionStatusApi,
  getCommisionditApi,
  getCommisionAddApi,
} from "@/wss/api/financial/commision.js";
import Add from "./add.vue";
import Edit from "./edit.vue";
export default {
  name: "laws",
  dicts: ["sys_normal_disable"],
  components: { ComSelect, ComForm, comForm, ComTable, Add, Edit },

  data() {
    return {
      // 是否显示添加对话框
      dialogVisible: false,
      initSelectValue: "",
      // 修改对话框是否显示
      EditDialogVisible: false,
      // 判断是否是图文,默认是1。
      isImgText: "1",
      // 加载
      loading: false,
      paging: { pageNum: 1, pageSize: 10, type: "1", total: 10 },
      // 切换筛选状态，不更新bug修复
      random: "",
      // 当前筛选的状态
      currentSelect: "",
      options: {
        value: "1",
        title: "快速筛选",
        list: [
          {
            value: "1",
            label: "图文",
          },
          {
            value: "2",
            label: "在线",
          },
          {
            value: "3",
            label: "电话",
          },
          {
            value: "4",
            label: "现场",
          },
          {
            value: "5",
            label: "文档",
          },
          {
            value: "6",
            label: "充值",
          },
          {
            value: "7",
            label: "VIP",
          },
        ],
      },
      // 动态生成下拉列表的筛选条件
      dynamicFilter: {},
      // 表格的数据
      tableList: [],
      tableModes: [
        {
          type: "selection",
        },
        {
          showOverflowTooltip: true,

          width: 200,
          label: "咨询类别",
          mode: "consultType",
          showOverflowTooltip: true,
          options: [
            {
              l: "合同代拟",
              v: 1,
            },
            {
              l: "合同审核",
              v: 2,
            },
          ],
        },
        {
          label: "角色",
          mode: "postionName",
        },
        {
          label: "职等",
          mode: "levelName",
          showOverflowTooltip: true,
        },
        {
          label: "拨比方式",
          mode: "commisionType",
          effectiveStatus: true,
          width: 100,
          align: "center",
          isShowTag: true,
          options: [
            {
              l: "比例",
              v: 1,
            },
            {
              l: "次数",
              v: 2,
            },
            {
              l: "时长",
              v: 3,
            },
          ],
        },
        {
          label: "拨比（元）",
          mode: "commision",
        },
      ],
      comForm: {
        modes: [
          {
            formType: "select",
            mode: "postionId",
            label: "角色",
            value: "",
            select: [],
          },
          {
            formType: "select",
            mode: "consultType",
            label: "咨询类别",
            value: "",
            select: [],
          },
        ],
      },
    };
  },

  mounted() {
    this.getCommisionListFn(this.paging);
  },
  methods: {
    // 显示添加对话框
    addShowFn() {
      this.dialogVisible = true;
    },
    // 删除
    async deleteFn(row) {
      try {
        await this.$modal.confirm("确定删除吗");

        let { code, msg } = await getCommisionStatusApi({ id: row.idStr });
        if (code == 200) {
          this.$modal.msgSuccess(msg);
          this.getCommisionListFn();
        }
      } catch (error) {}
      // console.log(result);
    },
    // 重设函数
    resetFn() {
      this.options.value = "1";
      this.paging.type = "1";
      this.dynamicAddFn(this.options.value);
    },
    // 当前页发生改变时候
    CurrentPageChangeFn(pageNUm) {
      this.paging.pageNum = pageNUm;
      this.getCommisionListFn(this.paging);
    },
    // 页容量发生改变时候
    currentPageSizeChangeFn(pageSize) {
      this.paging.pageSize = pageSize;
      this.getCommisionListFn(this.paging);
    },
    // 筛选数据
    queryFn(arr) {
      arr.forEach((item) => {
        for (const key in item) {
          this.paging[key] = item[key];
        }
      });
      this.currentSelect = this.initSelectValue;
      console.log(this.paging, "查询");
      this.paging.pageNum = 1;
      this.getCommisionListFn(this.paging);
    },
    // 获取筛选列表
    async getQueryFn(data = { pageNum: 1, pageSize: 10 }) {
      let consultType = [];
      this.dynamicFilter.consultType = [];
      //职位的下拉选择框
      let arrPositionIdStr = [];
      this.dynamicFilter.positionIdStr = [];
      const { rows, code } = await getCommisionListApi(data);
      if (code == 200) {
        rows.forEach((item) => {
          if (!arrPositionIdStr.includes(item.positionIdStr)) {
            /*
            添加过了的职位就不添加，没有添加过的就添加
            结果 如同 [{label:职位名.value:职位对应的id}]
            */
            this.dynamicFilter.positionIdStr.push({
              label: item.postionName,
              value: item.positionIdStr,
            });
            arrPositionIdStr.push(item.positionIdStr);
          }
          if (!consultType.includes(item.consultType)) {
            consultType.push(item.consultType);
          }
        });

        // 过滤掉隐式转换是false
        consultType = consultType.filter(Boolean);
        this.dynamicFilter.consultType = this.arrTransformObj(consultType, [
          "",
          "合同代拟",
          "合同审核",
        ]);
        // console.log(this.comForm.modes[0], this.comForm.modes[1]);
        //防止 this.comForm.modes[1|0]为undefined
        if (this.comForm.modes[0]) {
          this.comForm.modes[0].select = this.dynamicFilter.positionIdStr;
        }
        if (this.comForm.modes[1]) {
          this.comForm.modes[1].select = this.dynamicFilter.consultType;
        }
        // console.log(this.dynamicFilter, "123");
      }
    },
    // 获取列表数据
    async getCommisionListFn() {
      this.loading = true;

      const { rows, code } = await getCommisionListApi(this.paging);
      console.log(rows, "列表");
      if (code == 200) {
        this.tableList = rows;
        this.tableList.forEach((item) => {
          // 判断是次数|时长|比例
          switch (item.commisionType) {
            case "1":
              item.commision = item.commision + "/" + "比例";
              break;
            case "2":
              item.commision = item.commision + "/" + "次数";
              break;
            case "3":
              item.commision = item.commision + "/" + "时长";

              break;
            default:
              break;
          }
        });

        this.loading = false;
        this.getQueryFn(this.paging);
      }
    },
    dynamicAddFn(value) {
      switch (value) {
        // 如是图文则动态添加
        case "1":
          this.$set(this.tableModes[1], "label", "咨询类别");
          this.$set(this.tableModes[1], "mode", "consultType");
          this.$set(this.tableModes[1], "options", [
            {
              l: "合同代拟",
              v: 1,
            },
            {
              l: "合同审核",
              v: 2,
            },
          ]);
          this.$set(this.comForm.modes, 1, {
            formType: "select",
            mode: "consultType",
            label: "咨询类别",
            value: "",
            select: this.dynamicFilter.consultType,
          });

          break;
        case "4":
          // 如是现场则动态添加
          this.$set(this.tableModes[1], "label", "咨询类别");
          this.$set(this.tableModes[1], "mode", "consultType");
          this.$set(this.comForm.modes, 1, {
            formType: "select",
            mode: "consultType",
            label: "咨询类别",
            value: "",
            select: this.dynamicFilter.consultType,
          });
          this.$set(this.tableModes[1], "options", [
            {
              l: "合同代拟",
              v: 1,
            },
            {
              l: "合同审核",
              v: 2,
            },
          ]);
          break;
        // 不是图文和现场
        default:
          this.$set(this.tableModes[1], "label", "消费类型");
          this.$set(this.tableModes[1], "mode", "type");

          this.$set(this.comForm, "modes", [
            {
              formType: "select",
              mode: "postionId",
              label: "角色",
              value: "",
              select: this.dynamicFilter.positionIdStr,
            },
          ]);

          this.$set(this.tableModes[1], "options", [
            {
              l: "图文",
              v: 1,
            },
            {
              l: "在线",
              v: 2,
            },
            {
              l: "电话",
              v: 3,
            },
            {
              l: "现场 ",
              v: 4,
            },
            {
              l: "文档",
              v: 5,
            },
            {
              l: "充值",
              v: 6,
            },
            {
              l: "VIP",
              v: 7,
            },
          ]);
          break;
      }
      this.getCommisionListFn(this.paging);
    },
    // 筛选
    async ChangeFn(value) {
      this.paging.type = value;
      this.paging.consultType = null;
      this.paging.postionName = null;
      this.paging.postionId = null;
      this.isImgText = value;
      this.dynamicAddFn(value);
      this.random = Math.random();
    },
    // 添加
    async addFn(data) {
      data.type = this.options.value;
      let { msg, code } = await getCommisionAddApi(data);
      if (code == 200) {
        this.$modal.msgSuccess(msg);
        this.getCommisionListFn();
        this.dialogVisible = false;
      }
    },
    //修改
    async editFn(data) {
      // 赋值当前类型（在线|图文）

      const { msg, code } = await getCommisionditApi(data);
      console.log(msg);
      if (code == 200) {
        this.$modal.msgSuccess(msg);
        this.EditDialogVisible = false;
        this.getCommisionListFn();
      }
    },
    // 查看
    async editShowFn(row) {
      this.EditDialogVisible = true;
      this.$refs.edit.getDetailFn(row);
      // console.log(row);
    },
  },
};
</script>

<style lang ="scss" scoped>
.comform {
  margin-top: 20px;
}
</style>